<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>canvas</title>
    <script>
    window.onload = function(argument) {
        draw();

        function draw(argument) {
            var canvas = document.getElementById('canvas');
            var context = canvas.getContext('2d');
            context.fillStyle = "#eef";
            context.fillRect(0, 0, 400, 400);
            var n = 0;
            for (var i = 0; i < 10; i++) {
                context.beginPath();
                context.arc(i * 25, i * 25, i * 20, 0,3, true);
                context.closePath();
                context.fillStyle = 'rgba(255,0,0,0.2)'
                context.fill();
            };
        };
    }
    </script>
</head>

<body>
    <canvas id="canvas" width="400" height="500"></canvas>
</body>

</html>
